<template>
    <div>
        <!-- 线路售票情况 -->
        <div class="container">
            <el-row>
                <el-col>
                    <!-- 表单 -->
                    <el-form :inline="true" :model="formList" class="ticketForm" id="lineTicketing">
                        <el-col :span="10">
                            <el-form-item label="班次日期">
                                <el-date-picker type="date" size="mini" class="minipt"
                                                v-model="formList.startDate" value-format="yyyy-MM-dd"></el-date-picker>
                                至
                                <el-date-picker type="date" size="mini" class="minipt"
                                                v-model="formList.endDate" value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="线路" class="minipt">
                                <el-autocomplete v-model="formList.roadname" size="mini"
                                                 :fetch-suggestions="querySearchendroads">
                                </el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <button class="check-btn rf" type="button" @click="check">
                            <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询

                        </button>
                    </el-form>
                </el-col>

            </el-row>

            <!-- 表格 -->
            <div>
                <el-table style="width: 100%" :data="tableData" height="600px" show-summary>
                    <el-table-column type="index" label="序号">
                        <template scope="scope"><span>{{scope.$index+(nowpagenumb - 1) * nowpagesize + 1}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="line_name" label="线路"></el-table-column>
                    <el-table-column prop="all_seat" label="总座位"></el-table-column>
                    <el-table-column prop="seatcount" label="可售座位"></el-table-column>
                    <el-table-column prop="cansalecount" label="余票"></el-table-column>
                    <el-table-column prop="salecount" label="已售"></el-table-column>
                    <el-table-column prop="enfantcount" label="免票儿童"></el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[10,50, 200, 500]"
                        :page-size="50"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total='this.totalrows'
                        background>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import "../../assets/js/jquery.js";
    import qs from "qs";

    export default {
        data() {
            return {
                totalrows:"",
                nowpagesize: "",
                nowpagenumb: "",
                controllernumb: "",

                formList: {
                    startDate: "",
                    endDate: "",
                    roadname: "",
                },
                tableData: [],
                nowtoday: "",
                roadlist: [],
                roadsid: "",


            };
        },
        methods: {
            //
            createFilter(queryString) {
                return arr => {
                    return arr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
                };
            },
            //线路自动补全
            querySearchendroads(queryString, cb) {
                var arr = this.roadlist;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //线路请求
            loadRoads() {
                var arr = [];
                this.$http
                    .post("/sch/data/line/listWithSpell")
                    .then(data => {
                        for (var e of data.data) {
                            arr.push({value: e.name, prop: e.id});
                        }
                        console.log(arr);
                    });
                return arr;
            },
            //获取列表
            getroadselllist(){
                let pagerows = (this.nowpagesize == "") ? 50 : this.nowpagesize;
                let pagenumb = (this.nowpagenumb == "") ? 1 : this.nowpagenumb;
                this.$http
                    .post(
                        "/query/linesale/detail/list",
                        qs.stringify({
                            filterRules: '[{"field":"bus_plan.bus_date","op":"dge","value":"' + this.nowtoday + '"},' +
                            '{"field":"bus_plan.bus_date","op":"dle","value":"' + this.nowtoday + '"}]',
                            page: pagenumb,
                            rows: pagerows,
                        })
                    )
                    .then(data => {
                        this.tableData = data.data.list;
                        this.totalrows = data.data.totalRow;
                        this.nowpagesize = data.data.pageSize;
                        this.nowpagenumb = data.data.pageNumber;
                    });
            },
            //查询
            check(){
                let pagerows = (this.nowpagesize == "") ? 50 : this.nowpagesize;
                let pagenumb = (this.nowpagenumb == "") ? 1 : this.nowpagenumb;
                this.controllernumb = 1;
                this.$http
                    .post(
                        "/query/linesale/detail/list",
                        qs.stringify({
                            filterRules: '[{"field":"bus_plan.bus_date","op":"dge","value":"'+this.formList.startDate+'"},' +
                            '{"field":"bus_plan.bus_date","op":"dle","value":"'+this.formList.endDate+'"},' +
                            '{"field":"base_line.id","op":"eq","value":"'+this.roadsid+'"}]',
                            page: pagenumb,
                            rows: pagerows,
                        })
                    )
                    .then(data => {
                        this.tableData = data.data.list;
                        this.totalrows = data.data.totalRow;
                        this.nowpagesize = data.data.pageSize;
                        this.nowpagenumb = data.data.pageNumber;
                    });
            },
            //时间处理,获取当天时间
            todayfunction(){
                let now = new Date();
                var nowday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
                this.nowtoday = nowday;
                this.formList.startDate = nowday;
                this.formList.endDate = nowday;
            },
            //pageSize变化事件
            handleSizeChange(val) {
                console.log(val);
                this.nowpagesize = val;
                if (this.controllernumb == 1) {
                    this.check();
                } else {
                    this.getroadselllist();
                }
            },
            //pageNum变化事件
            handleCurrentChange(val) {
                console.log(val);
                this.nowpagenumb = val;
                if (this.controllernumb == 1) {
                    this.check();
                } else {
                    this.getroadselllist();
                }
            },


        },
        watch: {
            //侦听线路名，获取其id
            "formList.roadname": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.formList.roadname == "") {
                        this.roadsid = "";
                    } else {
                        for (var item of this.roadlist) {
                            if (this.formList.roadname == item.value) {
                                this.roadsid = item.prop;
                                break;
                            } else {
                                this.roadsid = "";
                            }
                        }
                        console.log(this.roadsid)
                    }
                },
                deep: true
            },
        },
        mounted(){
            this.todayfunction();
            this.getroadselllist();
            this.roadlist = this.loadRoads();
        },

    }
</script>
<style scoped>
    @import url('../../assets/css/check/lineTicketing.css');

    .el-date-editor.el-input {
        width: 150px !important;
    }

    .check_btn, .check_btn:hover {
        background: #009688;
        border-radius: 5px;
        border: 0px;
        color: white;
        cursor: pointer;
        padding: 10px 20px;
    }

    .form_btn {
        float: right;
        margin-right: 70px;
    }
</style>
